<template>
    <div class="p-2">
        <el-card shadow="never">
            <div style="display: flex; justify-content: space-between">
                <div>
                    <el-button v-if="submitButtonShow" :loading="buttonLoading" type="info"
                        @click="submitForm('draft')">暂存</el-button>
                    <el-button v-if="submitButtonShow" :loading="buttonLoading" type="primary"
                        @click="submitForm('submit')">提
                        交</el-button>
                    <el-button type="primary"
                        @click="approvalVerifyOpen">审批</el-button>
                    <el-button
                        type="primary" @click="handleApprovalRecord">流程进度</el-button>
                </div>
                <div>
                    <el-button style="float: right" @click="goBack()">返回</el-button>
                </div>
            </div>
        </el-card>

        <submitVerify ref="submitVerifyRef" :task-variables="taskVariables" @submit-callback="submitCallback" />
        <!-- 审批记录 -->
        <approvalRecord ref="approvalRecordRef" />
    </div>
</template>

<script setup lang="ts">
import { addLeave, getLeave, updateLeave } from '@/api/workflow/leave';
import { startWorkFlow } from '@/api/workflow/task';
import SubmitVerify from '@/components/Process/submitVerify.vue';
import ApprovalRecord from '@/components/Process/approvalRecord.vue';
import { AxiosResponse } from 'axios';
import { getSupplierAddProducts } from '@/api/system/supplierAddProducts/index'
const { proxy } = getCurrentInstance() as any;

const buttonLoading = ref(false);
const loading = ref(true);
const leaveTime = ref<any>([]);
//路由参数
const routeParams = ref<any>({});
const type = ref('')
//提交组件
const submitVerifyRef = ref<any>();
//审批记录组件
const approvalRecordRef = ref<any>();

const leaveFormRef = ref<any>();

const submitFormData = ref<any>({
    businessKey: '',
    tableName: '',
    variables: {}
});
const taskVariables = ref<any>({});

const initFormData: any = {};
const data = reactive<any>({
    form: { ...initFormData },
    queryParams: {
        pageNum: 1,
        pageSize: 10,

    },
    rules: {
        id: [{ required: true, message: '主键不能为空', trigger: 'blur' }],
        leaveType: [{ required: true, message: '请假类型不能为空', trigger: 'blur' }],
        leaveTime: [{ required: true, message: '请假时间不能为空', trigger: 'blur' }],
        leaveDays: [{ required: true, message: '请假天数不能为空', trigger: 'blur' }]
    }
});

const { form, rules } = toRefs(data);

/** 表单重置 */
const reset = () => {
    form.value = { ...initFormData };
    leaveTime.value = [];
    leaveFormRef.value?.resetFields();
};


/** 获取详情 */
const getInfo = () => {
    loading.value = true;
    buttonLoading.value = false;
    nextTick(async () => {
        const res = await getSupplierAddProducts(routeParams.value.id.split('_')[0]);
        // const res = await getLeave(routeParams.value.id);
        Object.assign(form.value, res.data);
        leaveTime.value = [];
        leaveTime.value.push(form.value.startDate);
        leaveTime.value.push(form.value.endDate);
        loading.value = false;
        buttonLoading.value = false;
    });
};

/** 提交按钮 */
const submitForm = (status: any) => {
    if (leaveTime.value.length === 0) {
        proxy?.$modal.msgError('请假时间不能为空');
        return;
    }
    try {
        leaveFormRef.value?.validate(async (valid: boolean) => {
            form.value.startDate = leaveTime.value[0];
            form.value.endDate = leaveTime.value[1];
            if (valid) {
                buttonLoading.value = true;
                let res: AxiosResponse<any>;
                if (form.value.id) {
                    res = await updateLeave(form.value);
                } else {
                    res = await addLeave(form.value);
                }
                form.value = res.data;
                if (status === 'draft') {
                    buttonLoading.value = false;
                    proxy?.$modal.msgSuccess('暂存成功');
                    proxy.$tab.closePage(proxy.$route);
                    proxy.$router.go(-1);
                } else {
                    await handleStartWorkFlow(res.data);
                }
            }
        });
    } finally {
        buttonLoading.value = false;
    }
};

//提交申请
const handleStartWorkFlow = async (data: any) => {
    try {
        submitFormData.value.tableName = 'test_leave';
        submitFormData.value.businessKey = data.id;
        //流程变量
        taskVariables.value = {
            entity: data,
            leaveDays: data.leaveDays,
            userList: [1, 3],
            userList2: [1, 3]
        };
        submitFormData.value.variables = taskVariables.value;
        const resp = await startWorkFlow(submitFormData.value);
        if (submitVerifyRef.value) {
            buttonLoading.value = false;
            submitVerifyRef.value.openDialog(resp.data.taskId);
        }
    } finally {
        buttonLoading.value = false;
    }
};
//审批记录
const handleApprovalRecord = () => {
    approvalRecordRef.value.init(`${form.value.id}_${type.value}`);
    // approvalRecordRef.value.init(routeParams.value.id);

};
//提交回调
const submitCallback = async () => {
    await proxy.$tab.closePage(proxy.$route);
    proxy.$router.go(-1);
};

//返回
const goBack = () => {
    proxy.$tab.closePage(proxy.$route);
    proxy.$router.go(-1);
};
//审批
const approvalVerifyOpen = async () => {
    submitVerifyRef.value.openDialog(routeParams.value.taskId);
};
//校验提交按钮是否显示
const submitButtonShow = computed(() => {
    if (type.value === 'PRE') {
        return (
            routeParams.value.type === 'add' ||
            (routeParams.value.type === 'update' &&
                form.value.preAuditStatus &&
                (form.value.preAuditStatus === 'draft' || form.value.preAuditStatus === 'cancel' || form.value.preAuditStatus === 'back'))
        );
    }
    if (type.value === 'PRD') {
        return (
            routeParams.value.type === 'add' ||
            (routeParams.value.type === 'update' &&
                form.value.prdAuditStatus &&
                (form.value.prdAuditStatus === 'draft' || form.value.prdAuditStatus === 'cancel' || form.value.prdAuditStatus === 'back'))
        );
    }
    if (type.value === 'STOCK') {
        return (
            routeParams.value.type === 'add' ||
            (routeParams.value.type === 'update' &&
                form.value.stockAuditStatus &&
                (form.value.stockAuditStatus === 'draft' || form.value.stockAuditStatus === 'cancel' || form.value.stockAuditStatus === 'back'))
        );
    }
    if (type.value === 'CONTACT') {
        return (
            routeParams.value.type === 'add' ||
            (routeParams.value.type === 'update' &&
                form.value.contactAuditStatus &&
                (form.value.contactAuditStatus === 'draft' || form.value.contactAuditStatus === 'cancel' || form.value.contactAuditStatus === 'back'))
        );
    }
    if (type.value === 'PRICE') {
        return (
            routeParams.value.type === 'add' ||
            (routeParams.value.type === 'update' &&
                form.value.priceAuditStatus &&
                (form.value.priceAuditStatus === 'draft' || form.value.priceAuditStatus === 'cancel' || form.value.priceAuditStatus === 'back'))
        );
    }
});

//校验审批按钮是否显示
const approvalButtonShow = computed(() => {
    if (type.value === 'PRE') {
        return routeParams.value.type === 'approval' && form.value.preAuditStatus && form.value.preAuditStatus === 'waiting';
    }
    if (type.value === 'PRD') {
        return routeParams.value.type === 'approval' && form.value.prdAuditStatus && form.value.prdAuditStatus === 'waiting';
    }
    if (type.value === 'STOCK') {
        return routeParams.value.type === 'approval' && form.value.stockAuditStatus && form.value.stockAuditStatus === 'waiting';
    }
    if (type.value === 'CONTACT') {
        return routeParams.value.type === 'approval' && form.value.contactAuditStatus && form.value.contactAuditStatus === 'waiting';
    }
    if (type.value === 'PRICE') {
        return routeParams.value.type === 'approval' && form.value.priceAuditStatus && form.value.priceAuditStatus === 'waiting';
    }
});

onMounted(() => {
    nextTick(async () => {
        routeParams.value = proxy.$route.query;
        type.value = routeParams.value.id.split('_')[1]
        reset();
        loading.value = false;
        if (routeParams.value.type === 'update' || routeParams.value.type === 'view' || routeParams.value.type === 'approval') {
            getInfo();
        }
    });
});
</script>

<style lang="scss" scoped></style>